<template>
  <div class="login-container">
    <el-form class="login-form" label-position="left" label-width="auto" :model="loginForm">
      <!-- 标题 -->
      <div class="title-container">
        <div class="title">Login</div>
      </div>

      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"/>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"/>
      </el-form-item>

      <el-form-item class="button-group">
<!--        <el-button type="primary" @click="login">登录</el-button>-->
        <el-button type="primary" @click="() => {router.push('/home')}">登录</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import request from "../../utils/request.ts";
import {AxiosResponse} from "axios";
import router from "../../router";
import {ElMessage} from "element-plus";

// 登录表单
const loginForm: {
  username: string,
  password: string
} = reactive({
  username: '',
  password: ''
});

// 报错信息表单
const loginFormErr: {
  username: string,
  password: string
} = reactive({
  username: '',
  password: ''
});

const login = () => {
  request.post('/user/login', {}, {
    params: loginForm
  }).then((response: AxiosResponse) => {
    if (response.data.code === 0) {
      // 登录成功，跳转到主页
      router.push('/home');
    } else if (response.data.code === 1) {
      loginFormErr.username = response.data.msg;
      loginFormErr.password = '';
    } else if (response.data.code === 2) {
      loginFormErr.username = '';
      loginFormErr.password = response.data.msg;
    }
  }).catch((error) => {
    console.error(error);
    ElMessage({
      message: '服务器异常，请稍候重试',
      type: 'error'
    });
  });
}
const register = () => {
  router.push('/register');
}
</script>

<style scoped lang="scss">
// 登录界面背景颜色
$bg_color: #2d3a4b;
// 表单项高度
$form_item_height: 56px;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg_color;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 250px 0;
    margin: 0 auto;
    overflow: hidden;

    .el-form-item {
      height: $form_item_height;
      margin-bottom: 20px;
    }

    .el-button {
      width: 48%;
      margin: 10px 0 0 0;
      height: calc($form_item_height - 20px);
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: #eee;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
  }
}
</style>